<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试高度</title>

		<style>
			html,
			body {
				height: 100vh;
				width: 100%;
				background-color: aqua;
				margin: 0;
				padding: 0;
			}

			* {
				box-sizing: border-box;
			}

			.out {
				width: 100px;
				padding: 0 30px;
				background-color: black;
			}

			.innner {
				width: 100%;
				background-color: yellow;
				height: 40px;
			}

			.testScroll {
				display: flex;
				flex-direction: column;
				background-color: #f5f5f5;
				flex: 1;
				min-height: 0;
			}

			.scrollInner {
				height: 100%;
				overflow-y: auto;
			}

			.container {
				display: flex;
				width: 200px;
				background-color: #fff;
			}

			.item {
				flex: 1;
				min-width: 0;
				overflow-x: auto;
			}

			.test {
				background-color: #458966;
				height: 60px;
			}
		</style>
	</head>
	<body>
		<div style="width: 100%;height:100%;background-color: red;display: flex;flex-direction: column;">
			<div class="test">
				a
			</div>
			<div class="container">
				<div class="item">这段文字非常aaaaaaaaaaaaaaaaa</div>
				<div class="item">正常内容</div>
			</div>
			<div class="testScroll">
				<div class="scrollInner">
					<div class=out>
						<div class="innner"></div>
					</div>

					<div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>a</div>
						<div>b</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>